<!--  -->
<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-row>
          <div class="titleSize">优惠券基础设置</div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="优惠券名称" prop="name">
                <el-input v-model="form.name" class="inp_wid" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="df_center">
                <el-form-item label="优惠券类型" prop="source">
                  <el-input v-model="form.source" disabled class="inp_wid" />
                </el-form-item>
                <el-col :span="3">
                  <div class="box">
                    <el-form-item>
                      <el-checkbox v-model="checked">无限张</el-checkbox>
                    </el-form-item>
                  </div>
                </el-col>
                <div v-if="!checked">
                  <el-form-item label="优惠券数量" prop="tiket_count">
                    <el-input v-model="form.tiket_count" class="inp_wid" disabled />
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <div class="titleSize">优惠券时间设置</div>
          <el-col :span="24">
            <el-form-item label="选择时间类型">
              <el-radio-group v-model="form.date_type">
                <el-radio label="1">领取后计算</el-radio>
                <el-radio label="2">固定范围</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="form.date_type == 1" :span="8">
            <el-form-item label="请输入天数" prop="limit_days">
              <el-input v-model="form.limit_days" class="inp_wid" />
            </el-form-item>
          </el-col>
          <div v-if="form.date_type == 2">
            <el-col :span="8">
              <el-form-item label="选择日期" width="236">
                <el-date-picker
                  v-model="dates"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item>
            </el-col>
          </div>
        </el-row>
        <el-row>
          <div class="titleSize">优惠券使用设置</div>
          <el-col :span="8">
            <el-form-item label="使用范围" prop="scope">
              <el-input v-model="form.scope" disabled class="inp_wid" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="发放方式" prop="send_type">
              <el-input v-model="form.send_type" disabled class="inp_wid" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="关联项目" prop="project_id">
              <el-button type="primary" @click="choose">选择</el-button>
              <el-input v-model="form.project_id" class="inp_wid" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="all_center">
          <el-button type="primary" @click="add('form')">新建</el-button>
        </div>
      </el-form>
    </div>
    <!-- 关联项目 -->
    <el-dialog title="添加项目" :visible.sync="dialogFormVisible" width="50%">
      <el-form ref="form1" :model="form1" label-width="120px">
        <el-form-item label="项目名称">
          <el-input v-model="form1.keyword" clearable class="inp_wid" />
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handldSure">确定</el-button>
        </el-form-item>
        <div v-loading="tableLoading" class="listDiv">
          <el-table ref="tableData" :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="60px" align="center">
              <template slot-scope="scope">
                <el-radio
                  v-model="project_id"
                  :label="scope.row.id"
                  @change="getCurrentRow(scope.row)"
                >{{ scope.row.$index }}</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="项目ID" prop="id" align="center" />
            <el-table-column label="项目名称" prop="group_project_name" align="center" />
            <el-table-column label="医院名称" prop="hospital_name" align="center" />
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form1.page"
              :page-sizes="page_sizes"
              :page-size="form1.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getProject, addCoupon } from "@/api/couponList";
export default {
  components: {},
  data() {
    return {
      form: {
        name: "",
        date_type: "",
        limit_days: "",
        start_ticket_time: "",
        end_ticket_time: "",
        source: 1 ? "抵扣券" : "",
        tiket_count: "",
        scope: 1 ? "指定可用" : "",
        send_type: 1 ? "礼包购买" : "",
      },
      checked: "",
      dates: null,
      projectList: [],
      value: 0,
      form1: {
        keyword: "",
        page: 1,
        size: 10,
      },
      page_totals: 0,
      page_sizes: [10, 30, 50, 100],
      project_id: "",
      tableData: [],
      dialogFormVisible: false,
      tableLoading: false,
      rules: {
        name: [
          {
            required: true,
            message: "请填写用户手机号",
            trigger: "blur",
          },
        ],
        date_type: [
          {
            required: true,
            message: "请选择时间类型",
            trigger: "change",
          },
        ],
        limit_days: [
          {
            required: true,
            message: "请输入天数",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    // this.getCoupon();
  },

  methods: {
    // 获取优惠券列表
    // getCoupon() {
    //   getProject().then((res) => {
    //     console.log("res", res.data);
    //     if (res.data.code == 200) {
    //     }
    //   });
    // },
    // 选择关联项目
    choose() {
      this.dialogFormVisible = true;
      this.porjectList(this.form1);
    },
    porjectList(opt) {
      // let data = {
      //   keyword: this.form1.keyword,
      // };
      getProject(opt).then((res) => {
        this.tableLoading2 = false;
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.page_totals = res.data.meta.total;
        }
      });
    },
    // 获取radio对应id
    getCurrentRow(e) {
      console.log("e", e);
      this.project_id = e.id;
      this.form.project_id = e.group_project_name;
    },
    handldSure() {
      this.dialogFormVisible = false;
    },
    // 查询
    handleSearch() {
      this.form1.page = 1;
      this.porjectList(this.form1);
    },
    add(form) {
      if (this.checked) {
        this.form.tiket_count = 0;
      }
      if (this.form.date_type == 2) {
        if (this.dates != null) {
          this.form.start_ticket_time = this.dates[0];
          this.form.end_ticket_time = this.dates[1];
        } else {
          this.form.start_ticket_time = null;
          this.form.end_ticket_time = null;
        }
      }
      const data = {
        name: this.form.name,
        date_type: this.form.date_type,
        limit_days: this.form.limit_days,
        start_ticket_time: this.form.start_ticket_time,
        end_ticket_time: this.form.end_ticket_time,
        source: 1,
        tiket_count: this.form.tiket_count,
        scope: 1,
        send_type: 1,
        project_id: this.project_id,
      };
      this.$refs[form].validate((valid) => {
        if (valid) {
          addCoupon(data).then((res) => {
            if (res.data.code == 200) {
              this.warnStatus("创建成功", "success");
              this.$router.push("Coupon");
            } else {
              this.$message.warning(res.data.msg);
            }
          });
        } else {
          this.warnStatus("有必填项没填，不能提交咯", "warning");
        }
      });
    },
    // 当前数
    handleSizeChange1(val) {
      this.form1.size = val;
      this.porjectList(this.form1);
    },
    // 当前页
    handleCurrentChange1(val) {
      this.form1.page = val;
      this.porjectList(this.form1);
    },
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 成功状态弹窗
    warnStatus(txt, status) {
      this.eleMsg(txt, status);
      // this.eleMsg(txt, "warning");
    },
  },
};
</script>
<style  scoped>
.app-container {
  padding: 30px !important;
}
.el-range-editor--medium.el-input__inner {
  width: 236px !important;
}

.all_center {
  text-align: center;
}
.df_center {
  display: flex;
}
.inp_wid {
  display: inline-block;
  width: 236px !important;
}
.titleSize {
  font-size: 36rpx;
  font-weight: 500;
  margin-bottom: 30px;
}
.box /deep/ .el-checkbox__inner {
  border-radius: 10px !important;
}
</style>
